<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: #8A8A8A;
			}
			div{
				width: 350px;
				height: 350px;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				background: #8A8A8A;
				text-align: center;
			}
			
			#div{
				display: none;
				background: url(images/logo.jpg);
				color: white;
				border-radius:20px ;
			}
			#box1{
				background: url(images/logo.jpg);
				color: white;
				border-radius:20px ;
			}
			#box1 .sa{
				width: 50px;
				height: 30px;
			}
			#s{
				width: 200px;
				height: 25px;
			}
			#ss{
				width: 200px;
				height: 25px;
			}
			#btn{
				width: 50px;
				height: 30px;
			}
			p{
				height: 100px;
				line-height: 100px;
			}
			
			nav{
				width: 100%;
				height: 50px;
				background: #CCCCCC;
				text-align: center;
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<nav>
			<h1>图书管理系统</h1>
			<img src="images/user.png" style="position: absolute;right: 100px;top: 0;" />
		</nav>
		<div id="box">
			<div id="box1">
				<p>账号:<input type="text" value="" name="username" id="s"><sapn></sapn></p>
				<p>密码:<input type="password" value="" name="password" id="ss"><sapn></sapn></p>
				<p><input type="button" value="登陆" class="sa">&nbsp;<input type="button" value="注册" class="sa"></p>
			</div>
		</div>
		<div id="div">
			<p>账号:<input type="text" value="" name="username" id="username"><sapn></sapn></p>
			<p>密码:<input type="text" value="" name="password" id="password"><sapn></sapn></p>
			<p><input type="button" value="提交" id="btn"></p>
			
		</div>
	</body>
	<script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var es = /^\w{6,8}$/		
		$("#username").on("focus",function(){
			$(this).next().html("请输入正确的账号")
			$("#username").on("blur",function(){
				if (es.test($(this).val())) {
					$(this).next().html("正确")
				}else{
					$(this).next().html("格式不正确")
				}
			})
		})	
			
		$("#password").on("focus",function(){
			$(this).next().html("请输入正确的密码")
			$("#password").on("blur",function(){
				if (es.test($(this).val())) {
					$(this).next().html("正确")
				}else{
					$(this).next().html("格式不正确")
				}
			})
		})
		
		
		
		
		
		
		
		
		
		$("#box input:button").eq(1).on("click",function(){
			$("#box").css("display","none");
			$("#div").css("display","block");
		})
		//注册
		$("#btn").on("click",function(){
			var obj = {
				username:$("#div #username").val(),
				password:$("#div #password").val(),
			}
			
			$.ajax({
				url:"http://localhost:6500/users",
				type:"post",				
				data:obj,
				success:function(e){
					localStorage.setItem("username",e.username)
				    localStorage.setItem("password",e.id)
					$("#box").css("display","block");
					$("#div").css("display","none");
				},
				error:function(er){
					console.log(er)
				}
			})
		})
		//登陆
		$("#box input:button").eq(0).on("click",function(){
			$.ajax({
				  url: 'http://localhost:6500/users/login',
				  type: "POST",
				  data: {username:$("#s").val(),password:$("#ss").val()},				  
				  success: function(data) {
				    console.log(data.username);
				    location.href="index.html"
				    
				  },
				  error: function(xhr) {
				    console.log(xhr.responseText);
				    alert("账号密码不存在")
				    
				  }
			});
		})
	</script>
	
</html>
